<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <meta name="format-detection" content="telephone=no" />
	    <meta name="renderer" content="webkit">
		<title>Orun 快乐跑 - 让奔跑更有趣</title>		
		<link rel="stylesheet" href="statics/css/lib/swiper.min.css" />
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_291365_7gidnx6979zfr.css" />
		<link rel="stylesheet" href="statics/css/orun3/global.css" />
		<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
		<script type="text/javascript" src="statics/js/orun_index/orun3_global.js"></script>		
		<script>
			// rem布局
			(function(win,doc){
			    function change(){
			        var a = doc.documentElement.clientWidth/375*20;
			    	if(a>40)a=40;
			        doc.documentElement.style.fontSize=a+'px';
			    }
			    change();
			    win.addEventListener('resize',change,false);
			})(window,document);
		</script>
	</head>
	<body>
		<div id="mHead">
			<nav class="mNav clearfloat">
				<div class="fl flex-row flex-baseline">
					<a class="mLogo default" href="javascript:;"></a>
					<span class="mLogoNav default">快乐跑产品</span>
				</div>
				<button id="mNavbarBtn" type="button" class="navbar-toggle fr">
			        <span class="default icon-bar"></span>
			        <span class="default icon-bar"></span>
			        <span class="default icon-bar"></span>
			    </button>
			    <div class="fl">
			    	<div id="mNavbarCon" class="navbar-mcollapse hide">          
				        <ul class="mnavbar-nav navbar-right">
				        	<li class="closeBtn">
				            	<a class="csdafont sicon-delete2" href="javascript:;"></a>
				            </li>
				            <li>
				            	<a  href="orun3_mIndex.html">首页</a>
				            </li>
				            <li>
				            	<a class="active" href="orun3_mPro.html">快乐跑产品</a>
				            </li>
				            <li>
				            	<a href="orun3_mDownload.html">微信</a>
				            </li>
				            <li>
				            	<a href="orun3_maboutUs.html">关于我们</a>
				            </li>
				        </ul>
				    </div>
			    </div>
			    
			</nav>

		</div>
		<div class="proList">
			<p class="proListTit">告别乏味</p>
			<p class="proListTitDec">在这里不仅仅是跑步</p>
			<ul class="proDec flex-row space-bet flex-wrap">
				<li class="pro_item">
					<div class="pro_itemCon">
						<img src="statics/images/orun3/icon_1.png"/>
					</div>
					<p class="pro_itemTxt">趣味跑法</p>
				</li>
				<li class="pro_item">
					<div class="pro_itemCon">
						<img src="statics/images/orun3/icon_2.png"/>
					</div>
					<p class="pro_itemTxt">计步分享</p>
				</li>
				<li class="pro_item">
					<div class="pro_itemCon">
						<img src="statics/images/orun3/icon_3.png"/>
					</div>
					<p class="pro_itemTxt">精准记录</p>
				</li>
				<li class="pro_item">
					<div class="pro_itemCon">
						<img src="statics/images/orun3/icon_4.png"/>
					</div>
					<p class="pro_itemTxt">分享快乐</p>
				</li>
			</ul>
		</div>
		<div class="proCon">
			<p class="proListTit">在这里</p>
			<p class="proListTitDec">你可以使用快乐跑</p>
			<div class="proConTop">
				<div class="swiper-container pro_swiper">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide swiper-slide-center none-effect">
			            	<img src="statics/images/orun3/mpage3_1.png" />
			            </div>
			            <div class="swiper-slide">
			            	<img src="statics/images/orun3/mpage3_2.png" />
			            </div>
			            <div class="swiper-slide">
			            	<img src="statics/images/orun3/mpage3_3.png" />
			            </div>
			            <div class="swiper-slide">
			            	<img src="statics/images/orun3/mpage3_4.png" />
			            </div>
			            <div class="swiper-slide">
			            	<img src="statics/images/orun3/mpage3_5.png" />
			            </div>
			        </div>
			        
			    </div>
			</div>			
		</div>
		<div style="display: none">
			<script>
				var _hmt = _hmt || [];
				(function() {
				  var hm = document.createElement("script");
				  hm.src = "https://hm.baidu.com/hm.js?967359526fca29be4d18e53fe242fbcc";
				  var s = document.getElementsByTagName("script")[0]; 
				  s.parentNode.insertBefore(hm, s);
				})();
			</script>
		</div>	
		<script src="statics/js/libs/swiper.min.js"></script>
		<script>
			$(function(){

				//设置背景图高度
				var viewH = $('.proList').height();
				$('.proCon').height(viewH);
				
				var swiper = new Swiper('.pro_swiper',{
					speed:1000,
					initialSlide : 1,
					autoplayDisableOnInteraction : false,
					centeredSlides : true,
					slidesPerView:2,
					onInit:function(swiper){
						swiper.slides[1].className="swiper-slide swiper-slide-active";//第一次打开不要动画
					},
				});			
			})
			
		</script>
	</body>
</html>
